<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.js"></script> 
<script type="text/javascript" src="angular-ui-router.js"></script>
<!-- http://www.bootcdn.cn/angular-ui-router/ -->
</head>
<body>
<!-- <div ng-app="myApp" ng-controller="myAppControl">
    {{username}}
    <div ng-view></div>
</div>
<script type="text/javascript">
//简单路由
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/a',{
        template : '这是a',
    }).when('/b',{
        template : '这是b'
    });
}]);
myApp.controller('myAppControl',function(){});
</script> -->
<!-- <div ng-app="myApp" ng-controller="myAppControl">
    <div ng-view></div>
    <script type="text/ng-template" id='a'><h1>你好A</h1></script>
    <script type="text/ng-template" id='b'><h1>你好B</h1></script>
</div>
<script type="text/javascript">
//简单路由
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/a',{
        templateUrl : 'a',
    }).when('/b',{
        templateUrl : 'b'
    });
}]);
myApp.controller('myAppControl',function(){});
</script> -->

<!-- <div ng-app="myApp">
    <h1>AngularJS Home Page (Ui-router Demonstration)</h1>
    <div ui-view></div>
</div>
<p>考文章：http://blog.csdn.net/ligang2585116/article/details/50380343</p>
<script type="text/javascript">
// App.js
var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
     $urlRouterProvider.when("", "/PageTab");
     $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url:"/Page1",
            templateUrl: "Page1.html"
        })
        .state("PageTab.Page2", {
            url:"/Page2",
            templateUrl: "Page2.html"
        })
        .state("PageTab.Page3", {
            url:"/Page3",
            templateUrl: "Page3.html"
        });
});
</script> -->
<div ng-app="myApp">
    <h1>AngularJS Home Page (Ui-router Demonstration)</h1>
    <div ui-view></div>
</div>
<script type="text/javascript">
// App.js
var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
     $urlRouterProvider.when("", "/PageTab");
     $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url:"/Page1",
            templateUrl: "Page1.html"
        })
        .state("PageTab.Page2", {
            url:"/Page2",
            templateUrl: "Page2.html"
        })
        .state("PageTab.Page3", {
            url:"/Page3",
            templateUrl: "Page3.html"
        });
});
</script> 
</body>
</html>